<template>
    <div class="index">


    <!--      工具条-->
      <div style="margin: 20px;">
        <el-button type="danger" size="small" icon="el-icon-refresh" @click="reload" > 刷 新</el-button>
      </div>

<!--      表格-->
      <div class="table">
        <el-table
          :data="userList"
          element-loading-text="Loading"
          border
          fit
          :stripe="true"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="index-table-expand">
                <el-form-item label="真实姓名">
                  <span>{{ props.row.realName}}</span>
                </el-form-item>
                <el-form-item label="昵称">
                  <span>{{ props.row.nickname }}</span>
                </el-form-item>
                <el-form-item label="手机号码">
                  <span>{{ props.row.phone }}</span>
                </el-form-item>
                <el-form-item label="性别">
                  <span>{{ props.row.sex | formatSex}}</span>
                </el-form-item>
                <el-form-item label="QQ">
                  <span>{{ props.row.qq }}</span>
                </el-form-item>
                <el-form-item label="邮箱">
                  <span>{{ props.row.email }}</span>
                </el-form-item>
                <el-form-item label="修改时间">
                  <span>{{ props.row.createTime }}</span>
                </el-form-item>
                <el-form-item label="修改时间">
                  <span>{{ props.row.lastTime }}</span>
                </el-form-item>
                <el-form-item label="自我介绍">
                  <span>{{ props.row.intro }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="id"
            label="ID"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="用户名"
            sortable
            width="250">
          </el-table-column>
          <el-table-column
            align="center"
            prop="phone"
            label="手机号码">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            align="left">
            <template slot="header" slot-scope="scope" label="操作">
            </template>
            <template slot-scope="scope">
              <el-button

                size="small"
                type="danger"
                icon="el-icon-delete"
                @click="openDeleteDialog(scope.$index, scope.row)"
              >删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--    分页插件-->
      <div class="block" style="text-align: center; margin-top: 20px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>



      <!--    删除对话框-->
      <div class="dialog">
        <el-dialog title="删除标签" :visible.sync="dialogUserDeleteVisible" align="center" width="30%" destroy-on-close="true"
                   :close-on-click-modal='false'>
          <span>是否删除 << {{userInfo.id  + ":" + userInfo.username }} >> </span>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUserDeleteVisible = false">取 消</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteUser">删 除</el-button>
          </div>
        </el-dialog>
      </div>

    </div>

</template>

<script>
  import { getUserList, deleteUserById} from '@/api/user'

  export default {
    name: 'index',
    inject: ['reload'],
    data() {
      return {
        // 标签列表
        userList:[],
        pageNum:1,    //当前页
        pageSize:10,   //每页条数
        pages:0, //总页数
        total: 0,     //总数据
        userInfo: Object,

        dialogUserDeleteVisible:false, //删除对话框
      }
    },
    mounted: function() {
      /**
       * 获取标签列表
       */
      this.getUserList();
    },
    methods: {
      /**
       * 获取用户列表
       */
      getUserList() {

        // api获取
        getUserList(this.pageNum,this.pageSize).then(response => {

          if (response.code == 200) {
            const { data } = response
            console.log(JSON.stringify(data))
            // 更新数据
            this.userList= data.records //数据
            this.pageNum = parseInt(data.current) //当前页
            this.pageSize = parseInt(data.size)    //每页条数
            this.pages = parseInt(data.pages)    //总页数
            this.total = parseInt(data.total)   //总条数

          }

        }).catch(error => {
          console.log(error)
        })

      },



      /**
       * 打开删除用户对话框
       * */
      openDeleteDialog(index, row) {
        this.userInfo = row;
        this.dialogUserDeleteVisible = true  //打开对话框
      },


      /**
       * 删除用户
       */
      deleteUser(){


        // api获取
        deleteUserById(this.userInfo.id).then(response => {

          if (response.code == 200) {

            this.$message({
              showClose: true,
              message: response.message,
              type: 'success',
              center: true
            });

            // 删除数据
           this.userListDeleteUserInfo(this.userInfo)
            this.dialogUserDeleteVisible = false
          }


        }).catch(error => {
          console.log(error);
        })

      },



      /**
       * userList 删除  userInfo
       * */
      userListDeleteUserInfo(userInfo){
        this.userList.forEach((userItem,index) =>{
          if (userItem.id == userInfo.id){
            // 删除数据
            this.userList.splice(index,1)
            return
          }
        })
      },


      /**
       * 触发其他页
       * @param val
       */
      handleCurrentChange(val) {
        this.pageNum = val
        this.getUserList();
      }

    },
    filters:{
      formatSex: function (value) {
        if (value == 0) return '男'
        if (value == 1) return '女'
      }
    }
  }
</script>

<style scoped>
  .index{
    margin:10px 20px;
  }
  .index-table-expand {
    font-size: 0;
  }
  .index-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .index-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
